<!-- 视频播放链接管理 -->

<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>链接管理</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 15px 0;">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
            <!-- 视频类型选择 -->
            <a-form-item label="请选择类型" style="width: unset;">
                <a-select v-model="videoCate" @change="videoCateOnSelected" :style="{width:'120px'}" placeholder="选择分类">
                    <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
                </a-select>
            </a-form-item>

            <!-- 视频选择 -->
            <a-form-item label="请选择视频" style="width: unset;margin-left: 30px;">
                <a-select v-model="videoId" @change="videoNameOnSelected" :style="{width:'200px'}" placeholder="选择视频">
                    <a-option :value="video.id" v-for="video in videoList">{{video.name}}</a-option>
                </a-select>
            </a-form-item>
        </div>

        <!-- 数据表格 -->
        <div style="max-height: 620px;">
            <a-table column-resizable :columns="tableColumns" :hoverable="true" :stripe="true" :data="videoLinkList"
                :scroll="{y: '100%'}">
                <template #operate="{ record }">
                    <a-button size="small" status="success" @click="showEditForm(record)" style="margin-left: 5px;">编辑
                    </a-button>
                    <a-popconfirm content="确定删除吗?" type="warning" @ok="deleteLink(record.id)">
                        <a-button size="small" status="danger" style="margin-left: 5px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <!-- 添加按钮 -->
        <div style="margin: 10px 0;">
            <a-button type="primary" @click="showAddForm">
                <template #icon>
                    <icon-plus />
                </template>
                <template #default>添加</template>
            </a-button>
        </div>
    </div>

    <!-- 弹出添加/编辑表单 -->
    <a-modal :title="addFormTitle" v-model:visible="addFormIsShow" @cancel="addFormCancel" @ok="addFormOk">
        <a-form :model="addVideoLinkFormData">
            <a-form-item field="name" label="名称">
                <a-input v-model="addVideoLinkFormData.name" />
            </a-form-item>
            <a-form-item field="url" label="url">
                <a-input v-model="addVideoLinkFormData.url" />
            </a-form-item>
            <a-form-item field="real_url" label="播放地址">
                <a-input v-model="addVideoLinkFormData.real_url" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>


<script>
import { ref, } from 'vue';
import { IconPlus, } from '@arco-design/web-vue/es/icon';
import { Message } from '@arco-design/web-vue';
import { getAllTeleplay, getTeleplayLinks } from '../../api/teleplay';
import { getAllMovie, getMovieLinks } from '../../api/movie';
import { getAllAnimation, getAnimationLinks } from '../../api/animation';
import { addTeleplayLink, editTeleplayLink, deleteTeleplayLink } from '../../api/tlink';
import { addMovieLink, editMovieLink, deleteMovieLink } from '../../api/mlink';
import { addAnimationLink, editAnimationLink, deleteAnimationLink } from '../../api/alink';


export default {
    components: {
        IconPlus,
    },
    setup() {
        // 表格列定义
        const tableColumns = ref([
            {
                title: 'Id',
                dataIndex: 'id',
                width: 80,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '名称',
                dataIndex: 'name',
            },
            {
                title: '地址',
                dataIndex: 'url',
                // width: 250,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '播放地址',
                dataIndex: 'real_url',
                // width: 250,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '操作',
                slotName: 'operate',
                fixed: 'right',
                width: 230,
            }
        ]);

        // 视频分类
        const cateList = ref([
            { id: '电视剧', name: '电视剧' },
            { id: '电影', name: '电影' },
            { id: '动漫', name: '动漫' },
        ]);

        // 选中的视频分类
        const videoCate = ref('');

        // 视频列表数据
        const videoList = ref([]);

        // 视频列表数据
        const videoLinkList = ref([]);

        // 选中视频id
        const videoId = ref('');

        // 分类选择框选择事件
        const videoCateOnSelected = (value) => {
            videoList.value = [];
            switch (value) {
                case '电视剧':
                    getTeleplays();
                    break;
                case '电影':
                    getMovies();
                    break;
                case '动漫':
                    getAnimations();
                    break;

                default:
                    break;
            }
            videoId.value = '';
        };

        // 获取电视剧数据
        const getTeleplays = () => {
            getAllTeleplay().then(res => {
                if (res.code != 200) {
                    Message.error('数据加载失败');
                    return;
                }
                videoList.value = res.data;
            }).catch(err => console.log(err));
        };

        // 获取电影数据
        const getMovies = () => {
            getAllMovie().then(res => {
                if (res.code != 200) {
                    Message.error('数据加载失败');
                    return;
                }
                videoList.value = res.data;
            }).catch(err => console.log(err));
        };

        // 获取动漫数据
        const getAnimations = () => {
            getAllAnimation().then(res => {
                if (res.code != 200) {
                    Message.error('数据加载失败');
                    return;
                }
                videoList.value = res.data;
            }).catch(err => console.log(err));
        };

        // 视频被选中
        const videoNameOnSelected = (id) => {
            videoLinkList.value = [];
            // 获取视频的播放链接
            switch (videoCate.value) {
                case '电视剧':
                    getTeleplayLinks(id).then(res => {
                        if (res.code != 200) {
                            Message.error(`获取数据失败：${res.msg}`);
                            return;
                        }
                        videoLinkList.value = res.data;
                    });
                    break;
                case '电影':
                    getMovieLinks(id).then(res => {
                        if (res.code != 200) {
                            Message.error(`获取数据失败：${res.msg}`);
                            return;
                        }
                        videoLinkList.value = res.data;
                    });
                    break;
                case '动漫':
                    getAnimationLinks(id).then(res => {
                        if (res.code != 200) {
                            Message.error(`获取数据失败：${res.msg}`);
                            return;
                        }
                        videoLinkList.value = res.data;
                    });
                    break;

                default:
                    break;
            }
        };


        // 视频id
        const vlinkId = ref(0);

        // 是否显示添加/编辑表单
        const addFormIsShow = ref(false);

        // 表单标题
        const addFormTitle = ref('添加链接');

        // 表单数据存储
        const addVideoLinkFormData = ref({
            name: '',
            url: '',
            real_url: '',
        });

        // 显示添加链接表单
        const showAddForm = () => {
            if (videoCate.value && videoId.value) {
                addFormTitle.value = '添加链接';
                addFormIsShow.value = true;
            }
        };

        // 提交添加/编辑视频
        const addFormOk = () => {
            switch (videoCate.value) {
                case '电视剧':
                    if (isEdit.value) {    // 编辑视频链接
                        editTeleplayLink(vlinkId.value, addVideoLinkFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            Message.success('操作成功');
                            isEdit.value = false;
                            vlinkId.value = 0;
                            // 重新加载数据
                            reloadTeleplayLinks();
                        }).catch(err => console.log(err));

                    } else {    // 添加视频链接
                        addVideoLinkFormData.value['teleplay_id'] = videoId.value;
                        addTeleplayLink(addVideoLinkFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            Message.success('操作成功');
                            // 重新加载数据
                            reloadTeleplayLinks();
                        }).catch(err => console.log(err));
                    }
                    break;

                case '电影':
                    if (isEdit.value) {    // 编辑视频链接
                        editMovieLink(vlinkId.value, addVideoLinkFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            Message.success('操作成功');
                            isEdit.value = false;
                            vlinkId.value = 0;
                            // 重新加载数据
                            reloadMovieLinks();
                        }).catch(err => console.log(err));
                    } else {    // 添加视频链接
                        addVideoLinkFormData.value['movie_id'] = videoId.value;
                        addMovieLink(addVideoLinkFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            reloadMovieLinks();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    }
                    break;

                case '动漫':
                    if (isEdit.value) {    // 编辑视频链接
                        editAnimationLink(vlinkId.value, addVideoLinkFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            Message.success('操作成功');
                            isEdit.value = false;
                            vlinkId.value = 0;
                            // 重新加载数据
                            reloadAnimationLinks();
                        }).catch(err => console.log(err));
                    } else {    // 添加视频链接
                        addVideoLinkFormData.value['animation_id'] = videoId.value;
                        addAnimationLink(addVideoLinkFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            reloadAnimationLinks();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    }
                    break;

                default:
                    break;
            }
        };

        // 重新加载电视剧链接数据
        const reloadTeleplayLinks = () => {
            getTeleplayLinks(videoId.value).then(res => {
                if (res.code != 200) {
                    Message.error(`获取数据失败：${res.msg}`);
                    return;
                }
                videoLinkList.value = res.data;
            });
        }

        // 重新加载电影链接数据
        const reloadMovieLinks = () => {
            getMovieLinks(videoId.value).then(res => {
                if (res.code != 200) {
                    Message.error(`获取数据失败：${res.msg}`);
                    return;
                }
                videoLinkList.value = res.data;
            });
        }

        // 重新加载动漫链接数据
        const reloadAnimationLinks = () => {
            getAnimationLinks(videoId.value).then(res => {
                if (res.code != 200) {
                    Message.error(`获取数据失败：${res.msg}`);
                    return;
                }
                videoLinkList.value = res.data;
            });
        }


        // 取消添加链接
        const addFormCancel = () => {
            isEdit.value = false;
            vlinkId.value = 0;
            addVideoLinkFormData.value = {};
            addFormIsShow.value = false;
        };

        // 是否为编辑
        let isEdit = ref(false);

        // 显示编辑表单
        const showEditForm = (record) => {
            addFormTitle.value = '编辑视频';
            isEdit.value = true;
            vlinkId.value = Number(record.id);
            addVideoLinkFormData.value = record;
            addFormIsShow.value = true;
        };

        // 删除链接
        const deleteLink = (id) => {
            switch (videoCate.value) {
                case '电视剧':
                    deleteTeleplayLink(id).then(res => {
                        if (res.code != 200) {
                            Message.error('操作失败');
                            return;
                        }
                        // 重新加载数据
                        reloadTeleplayLinks();
                        Message.success('删除成功');
                    }).catch(err => console.log(err));
                    break;

                case '电影':
                    deleteMovieLink(id).then(res => {
                        if (res.code != 200) {
                            Message.error('操作失败');
                            return;
                        }
                        // 重新加载数据
                        reloadMovieLinks();
                        Message.success('删除成功');
                    }).catch(err => console.log(err));
                    break;

                case '动漫':
                    deleteAnimationLink(id).then(res => {
                        if (res.code != 200) {
                            Message.error('操作失败');
                            return;
                        }
                        // 重新加载数据
                        reloadAnimationLinks();
                        Message.success('删除成功');
                    }).catch(err => console.log(err));
                    break;

                default:
                    break;
            }
        };


        return {
            tableColumns,
            cateList,
            videoCate,
            videoList,
            videoLinkList,
            videoId,
            addFormIsShow,
            addFormTitle,
            addVideoLinkFormData,

            videoCateOnSelected,
            videoNameOnSelected,
            showAddForm,
            addFormOk,
            addFormCancel,
            showEditForm,
            deleteLink
        }

    }
}

</script>